import React, { useState } from 'react'
import "./index.css"

export default function Item({todo, done, id, setTodoList, todoList }) {
  // console.log(todoList);
  //将控制active状态的值保存在state中,并设置初始值为false
  //移入就显示背景颜色,移出让背景颜色消失
  //删除按钮的显示与隐藏逻辑与输入框背景颜色的逻辑一致
  const [isActive, setIsActive] = useState(false)
  //移入移出的逻辑一样,但是监测的参数不一样,这种情况可以考虑使用函数柯理化写法
  //鼠标移入li事件函数
  const mouseHandle = (bool)=>{
    return ()=>{
      setIsActive(bool)
    }
  }
  // const mouseEnterHandle = ()=>{
  //   setIsActive(true)
  // }
  // //鼠标移出li事件函数
  // const mouseLeaveHandle = ()=>{
  //   setIsActive(false)
  // }

  const checkChangeHandle = (e)=>{
    //state数据是数组,引用数据类型,
    /*
    如果直接修改数组内某一个元素的值,然后把外层原数组直接重新赋给state
    直接赋值不会改变引用数据类型的地址,相当于把原值返回给state了
    无法改变state的状态,自然不会重新渲染
    
    */
    
    //?????以下的id是怎么与点击的input上的id进行关联的
    const newTodo = todoList.map(item => {
      if(item.id === id){
        // item.done = e.target.checked
        //尽量不改变原数组中的任何值,而是选择获得一个新值,直接覆盖
        return { ...item,done: e.target.checked }
      }

      return {...item}
    })


    setTodoList(newTodo)
  }

  //点击删除按钮删除事件的回调函数
  const deleteHandle = ()=>{
    const newTodoList = todoList.filter(item => {

      return item.id !== id
    })

    setTodoList(newTodoList)
  }

  return (
    <li 
      onMouseEnter={mouseHandle(true)}
      onMouseLeave={mouseHandle(false)}
      className= {isActive? "active" : ""}
    >
          <label>
            <input type="checkbox" checked={done} onChange={checkChangeHandle}/>
            <span>{todo}</span>
          </label>
          <button onClick={deleteHandle} className="btn btn-danger" style={{display: isActive ? "block" : "none"}}>删除</button>
    </li>
  )
}
